<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { getCourseAttendance, getStudentAttendance } from '@/api/teacher'
import { ElMessage } from 'element-plus'

const courseAttendanceDate = await getCourseAttendance()

// 定义接口
interface AttendanceRecord {
  id: number
  date: string
  desc: string
}

// 模拟课程数据
const courses = ref(courseAttendanceDate.data.courses)

// 模拟签到记录数据（按课程ID分组）
const attendanceRecords = ref(courseAttendanceDate.data.attendances)

const fistAttendanceRecord = (
  await getStudentAttendance(courseAttendanceDate.data.attendances[0][0].attendanceID)
).data
// 模拟数据
const attendanceData = ref(fistAttendanceRecord)

// 当前选中的课程和签到记录
const currentCourse = ref(courseAttendanceDate.data.courses[0].courseName)
const currentRecord = ref<number>(courseAttendanceDate.data.attendances[0][0].attendanceID)

// 当前课程的签到记录
const currentCourseRecords = ref(courseAttendanceDate.data.attendances[0])

// 监听课程变化，更新签到记录列表
watch(currentCourse, (newCourseName) => {
  const records = attendanceRecords.value.find(
    (record) => record.length > 0 && record[0].courseName === newCourseName,
  )
  if (!records || records.length === 0) {
    ElMessage({
      message: '该课程暂无签到记录',
      type: 'warning',
    })
    return
  }
  currentCourseRecords.value = records
  currentRecord.value = currentCourseRecords.value[0].attendanceID
  handleRecordChange(currentRecord.value)
})

// 处理签到记录选择变化
const handleRecordChange = async (value: number) => {
  console.log('选择的签到记录ID:', value)
  // TODO: 调用API获取对应的签到数据
  const queryResult = await getStudentAttendance(value)
  attendanceData.value.attended = queryResult.data.attended
  attendanceData.value.absent = queryResult.data.absent
  attendanceData.value.absentStudents = queryResult.data.absentStudents
  updateChart()
}
// 添加图表更新函数
const updateChart = () => {
  const chartDom = document.getElementById('attendanceChart')
  const myChart = echarts.init(chartDom)

  const option = {
    title: {
      text: '课程签到统计',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: [
          { value: attendanceData.value.attended, name: '已签到' },
          { value: attendanceData.value.absent, name: '未签到' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }

  myChart.setOption(option)
}

onMounted(() => {
  const chartDom = document.getElementById('attendanceChart')
  const myChart = echarts.init(chartDom)

  const option = {
    title: {
      text: '课程签到统计',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '签到统计',
        type: 'pie',
        radius: '50%',
        data: [
          { value: attendanceData.value.attended, name: '已签到' },
          { value: attendanceData.value.absent, name: '未签到' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }

  myChart.setOption(option)
})
</script>

<template>
  <div class="attendance-container">
    <div class="selectors">
      <el-select v-model="currentCourse" placeholder="请选择课程" class="selector-item">
        <el-option
          v-for="(course, index) in courses"
          :key="index"
          :label="course.courseName"
          :value="course.courseName"
        />
      </el-select>
      <el-select
        v-model="currentRecord"
        placeholder="请选择签到记录"
        class="selector-item"
        :disabled="!currentCourse"
        @change="handleRecordChange"
      >
        <el-option
          v-for="item in currentCourseRecords"
          :key="item.attendanceID"
          :label="`${item.courseName} (${item.date})`"
          :value="item.attendanceID"
        />
      </el-select>
    </div>

    <!-- 图表和表格容器 -->
    <div class="content-wrapper">
      <div class="chart-container">
        <div id="attendanceChart" style="width: 100%; height: 400px"></div>
      </div>
      <div class="absent-list">
        <h3>未签到学生名单</h3>
        <el-table :data="attendanceData.absentStudents" style="width: 100%">
          <el-table-column prop="studentName" label="姓名" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.selectors {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.selector-item {
  width: 300px;
}

.attendance-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.record-selector {
  margin-bottom: 20px;
}

.content-wrapper {
  display: flex;
  gap: 20px;
}

.chart-container {
  flex: 1;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 20px;
}

.absent-list {
  width: 200px;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 20px;
}

h3 {
  margin-bottom: 20px;
  color: #333;
}
</style>
